import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  Platform,
  Image,
} from 'react-native';
import PxToDp from '../../../utils/PxToDp';
import NavCon from '../../Public/NavCon';
import PersonalInfo from './DriverPerson';

class TestDriveBill extends Component {

  _goBack() {
    this.props.navigator.pop();
  }

  render() {
    const { user, car } = this.props;
    const { bill, test_dirve } = car;
    const testDirve = car.test_dirve;
    let time = '';
    if (testDirve && testDirve.when) {
      time = testDirve.when.replace(/T/i, ' ');
      time = time.slice(0, 16);
    }

    return (
      <View style={[styles.flex, styles.bgColor]}>
        <NavCon
          bgColor="#fff" currentTitle="预约试驾表单"
          onPress={() => this._goBack()}
        />
        <ScrollView>
          <PersonalInfo
            user={user}
            bill={bill}
          />
          <View style={[styles.bookDate, styles.section]}>
            <View style={styles.titleView}>
              <Text style={styles.sectionTitle}>客户信息</Text>
            </View>

            <View style={[styles.conViewItem, styles.row]}>
              <View style={styles.row}>
                <Image source={require('../../../img/detail/cule-choose-time.png')} />
                <Text style={styles.itemTitle}>试驾时间</Text>
              </View>
              <Text style={[styles.itemContent]}>{time}</Text>
            </View>
            <View style={styles.line} />

            <View style={[styles.conViewItem, styles.row]}>
              <View style={styles.row}>
                <Image source={require('../../../img/detail/online-contrast-adress.png')} />
                <Text style={styles.itemTitle}>试驾地点</Text>
              </View>
              <Text style={[styles.itemContent]}>{test_dirve.place}</Text>
            </View>
            <View style={styles.line} />

            <View style={[styles.conViewItem, styles.row]}>
              <View style={styles.row}>
                <Image source={require('../../../img/detail/online-contrast-all.png')} />
                <Text style={styles.itemTitle}>试驾人数</Text>
              </View>
              <Text style={[styles.itemContent]}>{test_dirve.num}</Text>
            </View>
            <View style={styles.line} />


            <View style={[styles.conViewItem, styles.row]}>
              <View style={styles.row}>
                <Image source={require('../../../img/detail/online-contrast-driver.png')} />
                <Text style={styles.itemTitle}>试驾专员</Text>
              </View>
              <Text style={[styles.itemContent]}>{test_dirve.reception}</Text>
            </View>
            <View style={styles.line} />

          </View>
        </ScrollView>
      </View>);
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  bgColor: {
    backgroundColor: '#fff',
    marginTop: Platform.OS === 'ios' ? 20 : 0,
    paddingBottom: PxToDp(20),
  },
  row: {
    flexDirection: 'row',
  },
  section: {
    width: '100%',
    backgroundColor: '#fff',
    paddingTop: PxToDp(15),
    paddingBottom: PxToDp(20),
  },
  sectionTitle: {
    color: '#000000',
    fontSize: PxToDp(15),
  },
  itemTitle: {
    fontSize: PxToDp(12),
    color: '#121212',
    marginLeft: PxToDp(9),
  },
  titleView: {
    height: PxToDp(38),
    justifyContent: 'center',
    backgroundColor: '#f8f8f9',
    paddingLeft: PxToDp(20),
  },
  itemContent: {
    fontSize: PxToDp(13),
    color: '#999',
  },
  conViewItem: {
    justifyContent: 'space-between',
    paddingTop: PxToDp(22),
    paddingLeft: PxToDp(22),
    paddingRight: PxToDp(19),
    height: PxToDp(47),
  },
  line: {
    width: '100%',
    height: PxToDp(0.5),
    backgroundColor: '#e8e8e8',
  },
});

export default TestDriveBill;
